<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Staff Manager</title>
    <script data-main="../js/main" src="../libs/requirejs-2.1.15/require.min.js">
    </script>
    <style>
        @import url('../css/style.css');
    </style>
</head>
<body>
    <!-- 网页内容区域 -->
    <div class="fm_main">

        <!-- 状态栏区域 -->
        <div class="fm_state">

            <!-- 系统标题 -->
            <div class="fm_sys_title">
                Staff Comm App ManageementConsole
            </div>

            <!-- 姓名 -->
            <div class="fm_logon_username">
                Welcome, Jenny
            </div>

            <!-- 注销按钮区域 -->
            <div class="fm_logoff">

                <!-- 为了让Log off 文字垂直居中区域 -->
                <div style="display: -webkit-flex; display: flex;
                position:relative;
                height:40px;">
                    <!-- 注销按钮 -->
                    <div style="position:relative;
		            margin: auto; ">
                        Log off
                    </div>
                </div>
            </div>
        </div>

        <!-- 导航栏区域 -->
        <div class="fm_nav">

            <!-- Logo区域 -->
            <div class="fm_logo">
                <!-- 为了让Log off 文字垂直居中区域 -->
                <div style="display: -webkit-flex; display: flex;
                position:relative;
                height:100px;">
                    <div style="position:relative;
                    margin: auto; ">
                        Logo
                    </div>
                </div>
            </div>

            <!-- 菜单区域 -->
            <div class="fm_menu_area">

                <!-- 为了让导航中的所有内容垂直居中区域 -->
                <div style="display: -webkit-flex; display: flex;
                position:relative;
                height:100px;">
                    <div style="position:relative;
                    margin: auto auto auto 10px; ">

                        <!-- 菜单项目 -->
                        <ul>
                            <li class="fm_sel" id="nav_muen_item_console_user" style="display: none;">
                                <a href="javascript:void(0)">
                                    Console User
                                </a>
                            </li>
                            <li id="nav_menu_item_app_user" style="display: none;">
                                <div class="fm_spl">
                                    |
                                </div>
                                <a href="javascript:void(0)">
                                    App User
                                </a>
                            </li>
                            <li id="nav_menu_item_app_content" style="display: none;">
                                <div class="fm_spl">
                                    |
                                </div>
                                <a href="javascript:void(0)">
                                    App Content
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 展示区域 -->
        <div class="fm_content">

            <!-- 标题 -->
            <div class="fm_title">
                App User
            </div>

            <!-- 内容区域 -->
            <div class="fm_content_are">

                <!-- 左侧子菜单区域 -->
                <div class="fm_left_are">

                    <!-- 菜单 -->
                    <ul>
                        <li class="fm_sel" id="content_menu_item_search_users">
                            <a href="javascript:void(0);">
                                Search Users
                            </a>
                        </li>
                        <li id="content_menu_item_overview">
                            <a href="javascript:void(0);">
                                Overview
                            </a>
                        </li>
                    </ul>
                </div>

                <!-- Search Users -->
                <div class="fm_right_area"  id="area_search_users">

                    <!-- 第一块区域 -->
                    <div class="block">
                        <!-- 标题信息 -->
                        <div class="fm_title">
                            Search Users
                        </div>

                        <!-- 表单区域,每个页面的这里是不同的，只需要更改这里的子div即可 -->
                        <div>
                            <div style="float: left;
                            margin-right: 130px;">
                                <div class="formLabel">Username</div>
                                <input type="text" class="inputtext" />
                            </div>
                            <div>
                                <div class="formLabel">Activation Code</div>
                                <input type="text" class="inputtext" />
                            </div>
                            <div style="clear: left;">
                            </div>
                            <div>
                                <div class="formLabel">Status</div>
                                <select class="inputtext">
                                    <option value="-1">All Status</option>
                                    <option value="1">Active</option>
                                    <option value="0">Inactive</option>
                                    <option value="2">Resigned</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- 第二块区域 -->
                    <div class="block">

                        <!-- 边框区域 -->
                        <div style="border: solid 1px rgb(210, 210, 210);">

                            <!-- 用户展示 -->
                            <div class="table">
                                <div class="tr">
                                    <div class="td">
                                        Username
                                    </div>
                                    <div class="td">
                                        Status
                                    </div>
                                    <div class="td">
                                        Action
                                    </div>
                                </div>
                                <div class="tr">
                                    <div class="td">
                                        Tommy
                                    </div>
                                    <div class="td">
                                        Locked
                                    </div>
                                    <div class="td">
                                        <a href="javascript:void(0)" style="margin-right: 3px; padding: 3px 10px;
                                        background-color: rgb(210, 210, 210);
                                        text-decoration: none;">
                                            Details
                                        </a>
                                        <a href="javascript:void(0)" style="margin-right: 3px; padding: 3px 10px;
                                        background-color: rgb(210, 210, 210);
                                        text-decoration: none;">
                                            Unlock
                                        </a>
                                        <a href="javascript:void(0)" style="margin-right: 3px; padding: 3px 10px;
                                        background-color: rgb(210, 210, 210);
                                        text-decoration: none;">
                                            Mark Resigned
                                        </a>
                                    </div>
                                </div>
                                <div class="tr">
                                    <div class="td">
                                        Sammy
                                    </div>
                                    <div class="td">
                                        Acvive
                                    </div>
                                    <div class="td">

                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <!-- Overview -->
                <div class="fm_right_area" id="area_overview" style="display: none;">

                    <!-- 第一块区域 -->
                    <div class="block">
                        <!-- 标题信息 -->
                        <div class="fm_title">
                            Overview
                        </div>

                        <!-- 表单区域,每个页面的这里是不同的，只需要更改这里的子div即可 -->
                        <div>
                            <!-- 边框区域 -->
                            <div style="border: solid 1px rgb(210, 210, 210);">
                                <div style="padding: 20px 10px;">
                                    <div style="display: inline;">
                                        Users conut
                                    </div>
                                    <div style="display: inline; ">
                                        3428
                                    </div>
                                </div>
                                <div style="padding: 20px 10px;">
                                    <div style="display: inline;">
                                        Locked conut
                                    </div>
                                    <div style="display: inline; ">
                                        16
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="clear: left"></div>
            </div>
        </div>
    </div>

</body>
</html>